{% extends "common/base.html" %}

{% block title %}更新文件 - {{ block.Super }}{% endblock %}

{% block wrapper %}
<style>
.main-box {
    margin-bottom: 0;
    margin: 15px;
}
.main-box .main-box-body {
    padding: 20px;
}
.toolbar {
    background: #f7f7f7;
    padding: 3px 5px;
    font-size: 0.85em;
}
.toolbar.top, .toolbar.after-top {
    border-bottom: 1px solid #ddd;
}
#toolbar-box {
    display: none;
}
</style>

<div class="main-box clearfix">
    <div class="main-box-body clearfix">
        <form role="form">
            <div class="form-group">
                <label for="file-content">文件</label>
                <input type="text" class="form-control" readonly placeholder="文件" value="{{ file }}">
            </div>

            <div class="form-group">
                <label for="file-content">内容</label>
                <textarea class="form-control" id="file-content" rows="8">{{ data }}</textarea>
            </div>

            <input type="hidden" id="fs-file" value="{{ file }}" />
            <div class="form-group">
                <button type="button" class="btn btn-success pull-right js-save-btn">提交保存</button>
            </div>
        </form>
    </div>
</div>

<div id="toolbar-box">
    <div id="toolbar" class="toolbar top">
        <form class="form-inline" role="form" method="get">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        主题
                    </span>
                    <select name="theme" class="form-control toolbar-theme">
                        <option value="material">material</option>
                        <option value="eclipse">eclipse</option>
                        <option value="seti">seti</option>
                        <option value="dracula">dracula</option>
                        <option value="abcdef">abcdef</option>
                        <option value="lucario">lucario</option>
                        <option value="midnight">midnight</option>
                        <option value="yonce">yonce</option>
                        <option value="rubyblue">rubyblue</option>
                        <option value="mbo">mbo</option>
                    </select>
                </div>
            </div>
        
            <a href="javascript:;" 
                class="btn btn-default js-linewrapping-btn" 
                title="自动换行">
                自动换行
            </a>
        
            <a href="javascript:;" 
                class="btn btn-default js-fullscreen-btn" 
                title="Shift-Alt-Enter 退出全屏">
                全屏
            </a>
        </form>
    </div>
</div>
{% endblock %}

{% block script %}
<link rel="stylesheet" href='{{ assets("js/codemirror/lib/codemirror.css") }}'>
<script src='{{ assets("js/codemirror/lib/codemirror.js") }}'></script>

<script src='{{ assets("js/codemirror/addon/selection/active-line.js") }}'></script>

<!--支持代码折叠-->
<link rel="stylesheet" href='{{ assets("js/codemirror/addon/fold/foldgutter.css") }}'/>
<script src='{{ assets("js/codemirror/addon/fold/foldcode.js") }}'></script>
<script src='{{ assets("js/codemirror/addon/fold/foldgutter.js") }}'></script>
<script src='{{ assets("js/codemirror/addon/fold/brace-fold.js") }}'></script>
<script src='{{ assets("js/codemirror/addon/fold/comment-fold.js") }}'></script>

<!--全屏模式-->
<link rel="stylesheet" href='{{ assets("js/codemirror/addon/display/fullscreen.css") }}'>
<script src='{{ assets("js/codemirror/addon/display/fullscreen.js") }}'></script>

<!--括号匹配-->
<script src='{{ assets("js/codemirror/addon/edit/matchbrackets.js") }}'></script>

<!--自动补全-->
<link rel="stylesheet" href='{{ assets("js/codemirror/addon/hint/show-hint.css") }}'>
<script src='{{ assets("js/codemirror/addon/hint/show-hint.js") }}'></script>
<script src='{{ assets("js/codemirror/addon/hint/anyword-hint.js") }}'></script>

<!--matchtags-->
<script src='{{ assets("js/codemirror/addon/fold/xml-fold.js") }}'></script>
<script src='{{ assets("js/codemirror/addon/edit/matchtags.js") }}'></script>
<script src='{{ assets("js/codemirror/mode/xml/xml.js") }}'></script>

<script src='{{ assets("js/codemirror/addon/display/panel.js") }}'></script>

<!--高亮类型-->
<script src='{{ assets("js/codemirror/addon/mode/loadmode.js") }}'></script>
<script src='{{ assets("js/codemirror/mode/meta.js") }}'></script>
<script src='{{ assets("js/loadcss.js") }}' type="text/javascript"></script>

<script src='{{ assets("js/jquery.js") }}' type="text/javascript"></script>
<script src='{{ assets("js/layer/layer.js") }}' type="text/javascript"></script>

<script type="text/javascript">
;(function($) {
    "use strict";

    // 加载主题
    var theme = "{{ getCfg().App.CodeTheme }}";

    var themeURL = "{{ assets('js/codemirror/theme/%N.css') }}";
    loadCss({
        url: themeURL.replace(/%N/g, theme),
        id: "theme"
    });

    // 语法高亮
    CodeMirror.modeURL = "{{ assets('js/codemirror/mode/%N/%N.js') }}";
    var editor = CodeMirror.fromTextArea(document.getElementById("file-content"), {
        // 显示行号
        lineNumbers: true,
        styleActiveLine: true,

        // 主题
        theme: theme,

        // 代码折叠
        lineWrapping: false,
        foldGutter: true,
        gutters:[
            "CodeMirror-linenumbers",
            "CodeMirror-foldgutter"
        ],

        // 全屏模式
        fullScreen: false,

        // 括号匹配
        matchBrackets: true,

        matchTags: {
            bothTags: true
        },

        // ctrl-space 唤起智能提示
        extraKeys: {
            "Ctrl-J": "toMatchingTag",
            "Ctrl-Space": "autocomplete",
            "Shift-Alt-Enter": function (cm) {
                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            }
        },

        // 高亮
        mode: "null"
    });

    var ext = "{{ ext }}";
    var info = CodeMirror.findModeByExtension(ext);
    if (info) {
        editor.setOption("mode", info.mime);
        CodeMirror.autoLoadMode(editor, info.mode);
    }
    
    // pancel
    var node = $("#toolbar-box #toolbar")[0];
    editor.addPanel(node, {
        position: "top", // top | bottom
        stable: true
    });
    
    $(".toolbar-theme").val(theme);
    
    var themes = [];
    $("body").on("change", ".toolbar-theme", function() {
        var nowTheme = $(this).val();
        
        if (! themes.includes(nowTheme)) {
            var nowThemeURL = themeURL.replace(/%N/g, nowTheme);
            loadCss({
                url: nowThemeURL,
                id: "theme"
            });
            
            themes.push(nowTheme);
        }
        
        editor.setOption("theme", nowTheme);
    });
    
    $("body").on("click", ".js-linewrapping-btn", function() {
        editor.setOption("lineWrapping", !editor.getOption("lineWrapping"));
    });
    
    $("body").on("click", ".js-fullscreen-btn", function() {
        editor.setOption("fullScreen", !editor.getOption("fullScreen"));
    });

    // 动态更新内容
    editor.on("change", function(cm) {
        $("#file-content").val(cm.getValue())
    });

    // 保存
    $(".js-save-btn").click(function(e) {
        e.stopPropagation;
        e.preventDefault;

        var file = $("#fs-file").val();
        var data = $("#file-content").val();

        var url = '/file/update-file';
        $.post(url, {
            file: file,
            data: data,
        }, function(data) {
            if (data.code == 0) {
                layer.msg("保存成功");

                setTimeout(function() {
                    window.location.reload();
                }, 1500);
            } else {
                layer.msg(data.message);
            }
        }).fail(function (xhr, status, info) {
            layer.msg("请求失败");
        });
    });
})(jQuery);
</script>
{% endblock %}
